<template>
  <el-dialog
      fullscreen
      title="添加/编辑写字楼"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <SubmitForm
        labelPosition="right"
        labelWidth="120px"
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @change="handleFormChange"
        @save="onSave"
        @close="dialogValue = false"
    >
      <template #template_id>
        <el-select
            style="width: 300px"
            v-model="ruleForm.template_id"
            filterable
            placeholder="请选择模板"
            @change="val => handleFormChange({ key: 'template_id', val })"
        >
          <el-option
              v-for="item in templateList"
              :key="item.id"
              :label="item.building_name"
              :value="item.id"
          />
        </el-select>
      </template>
    </SubmitForm>

    <MapSelector @save="handleLocationSave" ref="mapSelector" />
  </el-dialog>
</template>

<script>
import { http } from '@/api'
import MapSelector from '../map'

export default {
  name: 'FormAdd',
  components: {
    MapSelector
  },
  data() {
    return {
      apiKey: 'officeBuilding',
      dialogValue: false,
      ruleForm: {},
      defaultForm: {
        template_id: '',
        template_name: '',
        building_name: '',
        publish_type: '传统写字楼',
        rent_type: '出租',
        building_type: '',
        can_register: 0,
        property_nature: '',
        district: '',
        district_label: '',
        address: '',
        building_number: '',
        floor: '',
        total_floors: '',
        floor_str: '',
        room_number: '',
        area: '',
        efficiency: '',
        decoration: '',
        can_divide: 0,
        facilities: [],
        tags: [],
        property_rights: '',
        lng: '',
        lat: '',
        post_url: '',
        image_url: [],
        video_url: '',
        business_name: '',
        building_description: '',
        business_phone: '',
        secret_remark: '',
        remark: '',
        price: '',
        day_price: '',
        price_type: '',
        is_property_fee: 0,
        lease_count: '',
        free_lease_count: '',
        payment_count: '',
        deposit_count: '',
        developer: '',
        property_company: '',
        property_fee: 0,
        ac_fee: 0,
        electricity_fee: 0,
        parking_fee: 0,
        subway_info: '',
        bus_info: '',
        commercial_facilities: '',
        hotel_facilities: '',
        administrative_facilities: '',
        project_facilities: ''
      },
      rules: {
        template_id: [{ required: true, message: '请输入楼盘名称', trigger: 'blur' }],
        building_name: [{ required: true, message: '请输入写字楼名称', trigger: 'blur' }],
        publish_type: [{ required: true, message: '请选择发布类型', trigger: 'change' }],
        rent_type: [{ required: true, message: '请选择租售方式', trigger: 'change' }],
        building_type: [{ required: true, message: '请选择写字楼类型', trigger: 'blur' }],
        address: [{ required: true, message: '请输入写字楼地址', trigger: 'blur' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        // is_property_fee: [{ required: true, message: '请选择是否收取物业费', trigger: 'change' }],
        lease_count: [{ required: true, message: '请输入租赁期限', trigger: 'blur' }],
        free_lease_count: [{ required: true, message: '请输入免租期限', trigger: 'blur' }],
        payment_count: [{ required: true, message: '请输入付款期限', trigger: 'blur' }],
        deposit_count: [{ required: true, message: '请输入押金', trigger: 'blur' }],
        building_number: [{ required: true, message: '请输入楼号', trigger: 'blur' }],
        area: [{ required: true, message: '请输入面积', trigger: 'blur' }],
        floor: [{ required: true, message: '请输入楼层', trigger: 'blur' }],
        total_floors: [{ required: true, message: '请输入总楼层', trigger: 'blur' }],
        room_number: [{ required: true, message: '请输入房间数', trigger: 'blur' }],
        efficiency: [{ required: true, message: '请输入效率', trigger: 'blur' }],
        decoration: [{ required: true, message: '请输入装修情况', trigger: 'blur' }],
        post_url: [{ required: true, message: '请输入房源图片', trigger: 'blur' }],
      },
      formList: [
        {
          label: '楼盘',
          prop: 'template_id',
          colSpan: 24,
          slot: true,
        },
        {
          label: '发布类型',
          prop: 'publish_type',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '传统写字楼', value: '传统写字楼' },
            { label: '联合办公', value: '联合办公' }
          ]
        },
        {
          label: '租售方式',
          prop: 'rent_type',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '出租', value: '出租' },
            { label: '出售', value: '出售' }
          ]
        },
        {
          label: '写字楼类型',
          prop: 'building_type',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '纯写字楼', value: '纯写字楼' },
            { label: '商业综合体', value: '商业综合体' },
            { label: '商务公寓', value: '商务公寓' },
            { label: '商务酒店', value: '商务酒店' },
            { label: '产业园区', value: '产业园区' }
          ]
        },
        {
          label: '可注册公司',
          prop: 'can_register',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ]
        },
        {
          label: '写字楼性质',
          prop: 'property_nature',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '新房', value: '新房' },
            { label: '二手房', value: '二手房' }
          ]
        },
        {
          label: '写字楼地址',
          prop: 'address',
          name: 'input',
          clearable: true,
          disabled: true,
          colSpan: 24,
          type: 'textarea',
          width: '50%'
        },
        {
          label: '开发商',
          prop: 'developer',
          name: 'input',
          clearable: true,
          colSpan: 24
        },
        {
          label: '物业公司',
          prop: 'property_company',
          name: 'input',
          clearable: true,
          colSpan: 24
        },
        {
          label: '楼栋/楼号',
          prop: 'building_number',
          name: 'input',
          clearable: true,
          colSpan: 24
        },
        {
          label: '所在楼层',
          prop: 'floor',
          name: 'number',
          clearable: true,
          colSpan: 8
        },
        {
          label: '所在楼层（客户）',
          prop: 'floor_str',
          clearable: true,
          colSpan: 8
        },
        {
          label: '总楼层',
          prop: 'total_floors',
          name: 'number',
          clearable: true,
          colSpan: 8
        },
        {
          label: '房间号',
          prop: 'room_number',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 24
        },
        {
          label: '建筑面积（㎡）',
          prop: 'area',
          name: 'number',
          clearable: true,
          colSpan: 24,
          step: 0.01,
          precision: 2
        },
        {
          label: '得房率（%）',
          prop: 'efficiency',
          name: 'number',
          clearable: true,
          colSpan: 24,
          step: 0.01,
          precision: 2
        },
        {
          label: '装修情况',
          prop: 'decoration',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '毛坯', value: '毛坯' },
            { label: '简装', value: '简装' },
            { label: '精装修', value: '精装修' },
            { label: '豪华装修', value: '豪华装修' }
          ],
        },
        {
          label: '可分割',
          prop: 'can_divide',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ]
        },
        {
          label: '配套设施',
          prop: 'facilities',
          name: 'checkbox',
          colSpan: 24,
          options: [
            { label: '水', value: '水' },
            { label: '电', value: '电' },
            { label: '电梯', value: '电梯' },
            { label: '暖气', value: '暖气' },
            { label: '宽带', value: '宽带' },
            { label: '电话', value: '电话' },
            { label: '中央空调', value: '中央空调' },
            { label: '办公家具', value: '办公家具' },
            { label: '免费车位', value: '免费车位' },
            { label: '员工餐厅', value: '员工餐厅' },
            { label: '安全监控', value: '安全监控' }
          ]
        },
        {
          label: '房源标签',
          prop: 'tags',
          name: 'checkbox',
          colSpan: 24,
          options: [
            { label: '价格可面议', value: '价格可面议' },
            { label: '转让费可面议', value: '转让费可面议' },
            { label: '随时入驻', value: '随时入驻' },
            { label: '随时看房', value: '随时看房' },
            { label: '租金含物业费', value: '租金含物业费' },
            { label: '租金含空调费', value: '租金含空调费' },
            { label: '租金含发票', value: '租金含发票' }
          ]
        },
        {
          label: '产权',
          prop: 'property_rights',
          name: 'radio',
          clearable: true,
          colSpan: 24,
          options: [
            { label: '开发商持有', value: '开发商持有' },
            { label: '个人持有', value: '个人持有' },
            { label: '公司持有', value: '公司持有' },
            { label: '其他', value: '其他' }
          ]
        },
        {
          label: '价格信息',
          prop: '价格信息',
          name: 'title'
        },
        {
          label: '租金类别',
          prop: 'price_type',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '净租金', value: '净租金' },
            { label: '含税', value: '含税' }
          ]
        },

        {
          label: '日租金',
          prop: 'day_price',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/㎡/天'
        },
        {
          label: '月租金',
          prop: 'price',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/月'
        },
        // {
        //   label: '是否含有物业费',
        //   prop: 'is_property_fee',
        //   name: 'radio',
        //   clearable: true,
        //   colSpan: 12,
        //   options: [
        //     { label: '是', value: 1 },
        //     { label: '否', value: 0 }
        //   ]
        // },
        {
          label: '物业费',
          prop: 'property_fee',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/㎡/天'
        },
        {
          label: '空调费',
          prop: 'ac_fee',
          name: 'input',
          clearable: true,
          colSpan: 12,
        },
        {
          label: '电费',
          prop: 'electricity_fee',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/度'
        },
        {
          label: '停车费',
          prop: 'parking_fee',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/月/辆'
        },
          // 起租期
        {
          label: '起租期',
          prop: 'lease_count',
          name: 'input',
          type: 'number',
          clearable: true,
          append: '月',
          colSpan: 8
        },
        {
          label: '免租期',
          prop: 'free_lease_count',
          name: 'input',
          type: 'number',
          append: '月',
          clearable: true,
          colSpan: 6
        },
          // 支付方式
        {
          label: '支付方式',
          prop: 'payment_count',
          name: 'input',
          type: 'number',
          colSpan: 6,
          prepend: '付',
          append: '月',
        },
        {
          label: '押金',
          prop: 'deposit_count',
          name: 'input',
          type: 'number',
          clearable: true,
          prepend: '押',
          append: '月',
          colSpan: 6
        },
        {
          label: '详细信息',
          prop: '详细信息',
          name: 'title'
        },
        {
          label: '名称',
          prop: 'building_name',
          name: 'input',
          clearable: true,
          colSpan: 12
        },
        {
          label: '描述',
          prop: 'building_description',
          name: 'input',
          type: "textarea",
          clearable: true,
          width: '500px',
          colSpan: 12
        },
        {
          label: '封面',
          prop: 'post_url',
          name: 'file',
          clearable: true,
          colSpan: 8
        },
        {
          label: '轮播图',
          prop: 'image_url',
          name: 'file',
          clearable: true,
          multiple: true,
          colSpan: 24
        },
        {
          label: '视频',
          prop: 'video_url',
          name: 'file_video',
          clearable: true,
          multiple: false,
          colSpan: 24
        },

        {
          label: '地铁信息',
          prop: 'subway_info',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：地铁M4号线埠西站B口直达；地铁M3号线李村站，M2号线香港中路站'
        },
        {
          label: '公交信息',
          prop: 'bus_info',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：周边3个公交站点，埠西站直达；40多条公交线，覆盖全城'
        },
        {
          label: '商超配套',
          prop: 'commercial_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：丽达mall，埠西市场；万象汇，宜家家居；利群商厦'
        },
        {
          label: '酒店配套',
          prop: 'hotel_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：桔子水晶，凯悦酒店；香格里拉，威斯汀酒店'
        },
        {
          label: '行政配套',
          prop: 'administrative_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：距市北CBD商务区约10分钟车程，距金狮广场约5分钟车程；距乐客城约15分钟车程，距五四广场约15分钟车程'
        },
        {
          label: '项目配套',
          prop: 'project_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：顶级奢华大堂，产品自带底商；开放式咖啡吧，礼宾大屏；星级茶室，共享会议室'
        },
        {
          label: '业主信息',
          prop: '业务信息',
          name: 'title'
        },
        {
          label: '业务姓名',
          prop: 'business_name',
          name: 'input',
          type: 'textarea',
          width: '500px',
          clearable: true,
          colSpan: 12
        },
        {
          label: '业务电话',
          prop: 'business_phone',

          name: 'input',
          type: 'textarea',
          width: '500px',
          clearable: true,
          colSpan: 12
        },
        {
          label: '备注',
          prop: 'remark',

          name: 'input',
          type: 'textarea',
          clearable: true,
          width: '500px',
          colSpan: 12
        },
        {
          label: '保密备注',
          prop: 'secret_remark',
          name: 'input',
          type: 'textarea',
          width: '500px',
          clearable: true,
          colSpan: 12
        }
      ],
      districtOptions: [],
      templateList: []
    }
  },
  methods: {
    handleLocationSave(locationData) {
      this.ruleForm.lat = locationData.lat
      this.ruleForm.lng = locationData.lng
      this.ruleForm.address = locationData.formatted_address
    },
    handleFormChange({ key, val }) {
      if (key === 'district') {
        let node = this.$refs.districtRef.getCheckedNodes()[0] || { pathLabels: [] }
        this.ruleForm.district_label = node.pathLabels.join('/')
      }
      if (key === 'template_id') {
        let find = this.templateList.find(item => item.id === val)
        if (find) {
          for (const findKey in find) {
            if (findKey !== 'id') {
              if (findKey === 'facilities' || findKey === 'tags') {
                this.ruleForm[findKey] = (find[findKey] || '').split(',')
              } else {
                this.ruleForm[findKey] = find[findKey]
              }
            }
          }
        }
        this.ruleForm.template_name = find.building_name
      }
      if (key === 'day_price') {
        // 根据平方计算月租金
        this.ruleForm.price = (Number(val) * 365 / 12 * Number(this.ruleForm.area)).toFixed(2)
      }
      if (key === 'price') {
        // 根据平方计算月租金
        this.ruleForm.day_price = (Number(val) * 12 / 365 / Number(this.ruleForm.area)).toFixed(2)
      }
      if (key === 'area') {
        this.ruleForm.price = (Number(this.ruleForm.day_price) * 365 / 12 * Number(this.ruleForm.area)).toFixed(2)
      }
    },
    open(row) {
      http.officeBuildingTemplate.list().then(res => {
        this.templateList = res.data
      })
      this.dialogValue = true
      http.district.tree().then(res => {
        this.districtOptions = res.data
        console.log(this.districtOptions)
      })
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          const data = res.data;
          // 处理多选项的数据转换
          if (data.facilities) {
            data.facilities = data.facilities.split(',');
          }
          if (data.tags) {
            data.tags = data.tags.split(',');
          }
          this.ruleForm = data;
        })
      } else {
        this.ruleForm = { ...this.defaultForm }
      }
    },
    async onSave() {
      const data = { ...this.ruleForm };
      // 处理多选项的数据转换
      if (Array.isArray(data.facilities)) {
        data.facilities = data.facilities.join(',');
      }
      if (Array.isArray(data.tags)) {
        data.tags = data.tags.join(',');
      }

      if (this.ruleForm.id) {
        await http[this.apiKey].update(this.ruleForm.id, data)
      } else {
        await http[this.apiKey].create('',data)
      }
      this.$emit('get-page')
      this.dialogValue = false
      this.$message.success('保存成功')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
